<template>
    <div class="index">
        <Header></Header>
        <div class="main" style="min-width:1300px;">
            <p class="current-nav">
                当前位置 : <router-link to="index">首页</router-link>
                <i> > </i> 应急预案编制
            </p>

            <div class="infor editplan">
                <!-- <a href="javascript:POBrowser.openWindowModeless('http://127.0.0.1:8011/word','width=1200px;height=800px;');">打开文件 </a> -->
                <ul class="epList">
                    <li>
                        <router-link
                            :to="{
                                path: 'editplan',
                                query: { navIndex: $route.query.navIndex }
                            }"
                            class="active"
                            >应急预案编制</router-link
                        >
                    </li>
                    <li>
                        <router-link
                            :to="{
                                path: 'planmanage',
                                query: { navIndex: $route.query.navIndex }
                            }"
                            >应急预案汇编</router-link
                        >
                    </li>
                </ul>
                <dl>
                    <dt class="dl-btn">
                        <i class="el-icon-info"></i> 温馨提示
                    </dt>
                    <dd>
                        根据贵单位的信息录入情况,尤其是风险评估结果,从应急预案库中为贵单位推荐了下列应急预案:
                    </dd>
                    <dd>
                        (1)系统已针对每个风险为企业生成了对应的应急预案模板，您可以点击<span
                            class="dl-btn edit"
                            ><i class="el-icon-edit-outline"></i> 编辑</span
                        >在模板上进行修改，保存后形成企业自己的应急预案。
                    </dd>
                    <dd>
                        (2)请您再三确认风险信息已全部录入完成,您就可以全选再点击<span
                            class="dl-btn sure"
                            ><i class="el-icon-document"></i> 预案汇总</span
                        >即可按步骤生成应急预案汇编。
                    </dd>
                </dl>
                <el-button
                    class="sure sure1"
                    @click="donum"
                    style="margin-left:100px;"
                    ><i class="el-icon-document"></i> 预案汇总</el-button
                >
                <div class="selectLs">
                    已选个数（<span>{{ selectNumber }}</span
                    >）
                </div>
                <div class="form-container">
                    <el-table
                        ref="multipleTable"
                        :data="dataList"
                        tooltip-effect="light"
                        border
                        v-loading.fullscreen.lock="loading"
                        v-loading.lock="loadings"
                        :element-loading-text="wordmsg"
                        element-loading-spinner="el-icon-loading"
                        :element-loading-background="loadingstyle"
                        @selection-change="handleSelectionChange"
                        width="1100px"
                        :row-key="getRowKeys"
                    >
                        <el-table-column
                            type="index"
                            align="center"
                            label="序号"
                            width="100"
                        >
                            <template slot-scope="scope">
                                {{
                                    (pageIndex - 1) * pageSize +
                                        scope.$index +
                                        1
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label=""
                            type="selection"
                            :reserve-selection="true"
                            width="50"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="planCategory"
                            label="应急预案类别"
                            :show-overflow-tooltip="true"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <span>{{
                                    scope.row.planCategory | changeType
                                }}</span>
                            </template>
                        </el-table-column>

                        <!-- <el-table-column prop="newTemplateName"
                             label="应急预案模板"
                             width="223"
                             :show-overflow-tooltip="true"
                             align='center'>
            </el-table-column>-->

                        <el-table-column
                            prop="planName"
                            label="企业应急预案"
                            :show-overflow-tooltip="true"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="操作"
                            :show-overflow-tooltip="true"
                            width="220px"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <div class="newmsg" title="请安装pageOffice">
                                    <iframe
                                        :src="
                                            $baseUrl +
                                                '/emergency/index/' +
                                                scope.row.id
                                        "
                                        width="85"
                                        height="40"
                                        frameborder="0"
                                    ></iframe>
                                </div>
                                <!--<el-button size="small"><i class="el-icon-delete"></i>删除</el-button>-->
                                <el-button
                                    class="detail-btn"
                                    @click="lookstatus(scope.row)"
                                    ><i class="el-icon-search"></i
                                    >查看</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="page-container">
                        <el-pagination
                            @current-change="getNewList"
                            :current-page.sync="pageIndex"
                            :page-size="pageSize"
                            @size-change="handleSizeChange"
                            :page-sizes="[10, 20, 50, 100]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                        >
                        </el-pagination>
                        <el-button>确定</el-button>
                    </div>
                </div>
            </div>
            <!-- <iframe width="100%"
                src=this.$baseUrl+"emergency/index/1xal1f"
                height="500">
        </iframe> -->
        </div>
        <Footer />
    </div>
</template>
<script>
import Header from '../common/header'
import Footer from '../common/footer'
// import "../../../static/js/pageoffice.js"
export default {
    components: {
        Header,
        Footer
    },
    data () {
        return {
            dialogVisible: false,
            uploadType: [
                '上传内部应急组织机构', '上传外部应急救援队伍', '上传应急物资装备', '上传应急救援协议'
            ],
            modeType: [
                '内部应急组织机构',
                '外部应急救援队伍',
                '应急物资装备'
            ],
            activeIndex2: -1,
            activeIndex: -1,
            formInline: {
                user: '',
                region: '',
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            multipleSelection: [],
            innnerH: "11111111111111111111111",
            loading: false,
            wordmsg: "",
            selectNumber: 0,
            loadings: true,
            loadingstyle: ''
        }
    },
    methods: {
        handleSizeChange (val) {
            this.pageSize=val
            this.getNewList()
        },
        handleCurrentChange (val) {
            console.log(`当前页: ${val}`);
        },
        onSubmit () {
            console.log('submit!');
        },
        toggleSelection (rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange (val) {
            this.multipleSelection = val;
            this.selectNumber = this.multipleSelection.length;
        },
        resetForm (formName) {
            //				this.$refs[formName].resetFields();
            this.$router.push('risk')
        },
        getNewList () {
            let params = {
                "companyId": JSON.parse(localStorage.getItem('user')).companyId,
                "pageIndex": this.pageIndex,
                "pageSize": this.pageSize
            }
            this.$axios
                ({
                    method: 'post',
                    url: this.$baseUrl + "emergency/v1.0/plan/list",
                    data: params
                }).then(
                    (res) => {
                        this.loadings = false;
                        this.dataList = res.data.data.records;
                        this.total = res.data.data.total;
                        console.log(this.dataList)
                    })
        },
        donum () {
            let arr = [];
            this.multipleSelection.forEach(
                (item) => {
                    arr = [...arr, item.id]
                }
            )
            let planIds = arr.join(",")
            let params = {
                "companyId": JSON.parse(localStorage.getItem('user')).companyId,
                "planIds": planIds,
                "userName": JSON.parse(localStorage.getItem('user')).userAccount
            };
            if (arr.length < 2) {
                this.$message({
                    message: "请至少选择所需的两条应急预案",
                    type: 'error'
                });
                return false;
            }
            let a1 = 0;
            this.wordmsg = "文档生成中，请耐心等待...已加载0%"
            this.loadingstyle = 'rgba(0,0,0,0.8)';
            this.loading = true;
            setTimeout(
                () => {
                    this.wordmsg = "文档生成中，请耐心等待...  已加载 10%"
                }, 3000
            )
            setTimeout(
                () => {
                    this.wordmsg = "文档生成中，请耐心等待...  已加载 20%"
                }, 6000
            )
            setTimeout(
                () => {
                    this.wordmsg = "文档生成中，请耐心等待...  已加载 30%"
                }, 15000
            )
            setTimeout(
                () => {
                    this.wordmsg = "文档生成中，请耐心等待...  已加载 50%"
                }, 25000
            )
            setTimeout(
                () => {
                    this.wordmsg = "文档生成中，请耐心等待...  已加载 70%"
                }, 45000
            )
            this.$axios
                ({
                    method: 'post',
                    url: this.$baseUrl + "emergency/v1.0/plan/summary",
                    data: params
                }).then(
                    (res) => {
                        this.loading = false;
                        if (res.data.meta.success) {
                            this.$message({
                                message: "保存成功",
                                type: 'success'
                            });
                        } else {

                            this.$message({
                                message: res.data.meta.message,
                                type: 'error'
                            });
                        }
                        this.$router.push({ path: 'planmanage', query: { navIndex: 3 } })
                    })
        },
        getRowKeys (row) {
            return row.id;
        },
        lookmsg (item) {
            let url = item.newTemplateFile;
            //  var tempwindow=window.open('_blank');//打开一个窗口，然后用

            //   tempwindow.location=url;//使这个窗口跳转到百度，这样就会呈现弹出百度窗口的效果了。

            const elink = document.createElement('a')
            elink.style.display = 'none';
            elink.target = '_blank';
            elink.href = url;
            document.body.appendChild(elink)
            elink.click()
            document.body.removeChild(elink)
            // const { href } = this.$router.resolve({name:"templete",query:{"url":url}});
            // window.open(href, '_blank');
        },
        todosummay () {
            let arr = [];
            this.multipleSelection.forEach(
                (item) => {
                    arr = [...arr, item.riskId]
                }
            )
            let riskIds = arr.join(",")
            let params = {
                "companyId": JSON.parse(localStorage.getItem('user')).companyId,
                "riskIds": riskIds,
                "userName": JSON.parse(localStorage.getItem('user')).userAccount
            };



            this.$axios
                ({
                    method: 'post',
                    url: this.$baseUrl + "emergency/v1.0/plan/summary",
                    data: params
                }).then(
                    (res) => {
                        if (res.data.meta.success) {
                            this.$message({
                                message: "预案汇总成功",
                                type: 'success'
                            });
                            this.lookdetailrecord();
                        } else {
                            this.$message({
                                message: res.data.meta.message,
                                type: 'error'
                            });
                        }
                    }
                )

        },
        getWordmsg () {
            //  POBrowser.openWindowModeless('http://yjyaapi-sit.bosafe.com/emergency/v1.0/view/word/'+id,'width=1200px;height=800px;');
            let id = "1xal1f";
            this.$axios({
                method: 'get',
                url: this.$baseUrl + "emergency/v1.0/view/word/" + id,
                data: {}
            }).then(
                (res) => {
                    this.innnerH = res.data.data.pageoffice;
                }
            )
        },
        lookstatus (item) {
            let baseUrl = item.newTemplateFile;
            var urlpath = baseUrl.indexOf("?") + 1;
            urlpath = baseUrl.substring(urlpath);
            var arrapi = urlpath.split("&");
            let uesrMessage = {}
            arrapi.forEach(
                (item) => {
                    var brrapi = [];
                    brrapi = item.split("=");
                    uesrMessage[brrapi[0]] = brrapi[1];
                }
            )

            let id = uesrMessage.srcFid;
            let expires = Date.parse(new Date());
            let a = "FastDFS1234Bossien" + id + expires
            console.log(a);
            let token = this.$md5(a)
            token = token.toUpperCase()
            let that = this;
            $.ajax({
                url: this.$baseUrl3 + "/queryPublishFileInfo.do?appId=001&srcFid=" + id + "&expires=" + expires + "&token=" + token,
                type: 'GET', //GET
                async: false,    //或false,是否异步
                data: {
                },
                timeout: 5000,    //超时时间
                success: function (data, textStatus, jqXHR) {
                    let status = JSON.parse(data);
                    if (!status.success) {
                        that.$message({
                            message: "正常，流媒体转码中，要等待",
                            type: 'error'
                        });
                        return false;
                    }
                    if (status.dataObj.srcFileStatusName == "12") {
                        that.lookmsg(item)
                    } else {
                        that.$message({
                            message: "正常，流媒体转码中，要等待",
                            type: 'error'
                        });
                    }
                },
                error: function (xhr, textStatus) {
                },
                complete: function () {
                }
            })
            // this.$axios({
            //   method: 'get',
            //   // url:"/queryPublishFileInfo.do?appId=001&scrFid="+id+"&expires="+expires+"&token="+token,
            //   url:"/queryPublishFileInfo.do?appId=001&srcFid="+id+"&expires="+expires+"&token="+token,
            //   data: {}
            // }).then(
            //   (res) => {
            //       // debugger;
            //       let status = JSON.parse(res.data);
            //       if(status.dataObj.srcFileStatusName=="12"){
            //           this.lookmsg(item)
            //       }else{
            //           this.$message({
            //           message: "文件正在转码中，请稍后有查看",
            //           type: 'error'
            //         });
            //       }

            //   }
            // )
        }
    },
    created () {
        this.getNewList();
        // this.lookstatus();
    },
    filters: {
        changeType (val) {
            if (!val) {
                return "";
            }
            if (val == 1) {
                return "综合预案"
            } else if (val == 2) {
                return "专项预案"
            } else if (val == 3) {
                return "现场处置方案"
            }
        }
    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import "../../../static/css/information.less";
.editplan {
    .epList {
        width: 370px;
        margin: 30px auto;
        height: 42px;
        border: 1px solid #4080ff;
        border-radius: 8px;
        li {
            float: left;
            width: 50%;
            a {
                display: block;
                color: #666;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }
            a.active {
                color: #fff;
                background: #4080ff;
            }
            a.active:hover {
                color: #fff;
            }
            a:hover {
                color: #4080ff;
            }
        }
        li:first-child {
            a {
                border-radius: 6px 0 0 6px;
            }
        }
        li:last-child {
            a {
                border-radius: 0 6px 6px 0;
            }
        }
    }
    dl {
        margin-left: 100px;
        font-size: 14px;
        .dl-btn {
            display: inline-block;
            padding: 0 10px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            border-radius: 6px;
            text-align: center;
            margin-bottom: 14px;
        }
        dt.dl-btn {
            background: #f6f9ff;
            color: #3f80ff;
        }
        dd {
            margin-bottom: 24px;
            color: #808080;
            .dl-btn {
                margin: 0 16px;
                color: #fff;
            }
            .dl-btn:hover {
                opacity: 1;
            }
            .edit {
                background: #f6f9ff;
                color: #3f80ff;
            }
        }
    }
    .sure1:hover {
        opacity: 0.8;
        color: #fff;
    }
    .el-button.sure.sure1 {
        color: #fff;
        background: #4080ff;
       /* background: linear-gradient(90deg, #6eb1ff 20%, #3372ff 80%);*/
    }
    .form-container {
        padding: 0 0 10px;
        margin: 0 auto;
        min-width: 1100px;
        .el-table {
            width: calc(100% - 200px);
            margin: 0 auto;
            border-top: 1px solid #ebeef5;
            min-width: 1100px;
            margin-left: 100px;
            td {
                padding: 0;
                height: 48px;
                line-height: 48px;
            }
            .div-edit {
                padding: 0 10px;
                a {
                    float: left;
                    text-decoration: underline;
                    color: #3f80ff;
                    line-height: 48px;
                }
                .el-button {
                    float: right;
                    color: #3f80ff;
                    background: #f6f9ff;
                    border: 0;
                    margin: 5px 0 0 10px;
                }
            }
        }
        .page-container {
            width: 620px;
            margin: 50px auto;
            padding: 0;
        }
    }
}
.newmsg {
    width: 85px;
    height: 40px;
    float: right;
    border-radius: 8px ;
   border: 1px solid #4180ff;
   padding-top: 2px;
  padding-left: 2px;
}
.selectLs {
    height: 40px;
    width: 200px;
    /* float: left; */
    margin-left: 100px;
    margin-top: 30px;
    line-height: 40px;
    > span {
        color: #409eff;
    }
}
.detail-btn {
  color: #4180ff !important;
  background: #f6f9ff !important;
  border: none !important;
  border-radius: 8px !important;
  border: 1px solid #4180ff !important;
}
</style>
